<template>
  <div style="height: 100%; cursor: pointer">
    <el-row justify="center" style="height: 100%;" :gutter="20">
      <el-col :span="12" style="height: 100%;">
        <div class="item" >
          <div class="item_inner item_inner2">
            <div style="height: 5%;line-height: 160%;" class="item_inner_content">{{ dateFormat(dateRight) }}</div>
            <div style="font-size: 1.3em;height:8%;line-height:190%;font-weight: bold;" class="item_inner_content">{{ titleRight }}</div>
            <div style="height: 17%;text-indent: 2em;" class="item_inner_content">{{ contentRight }}</div>
            <div style="height: 50%;" class="item_inner_content">
              <el-image style="width: 100%;height: 100%;" :src="require('@/assets/img/ppq.png')" fit="cover" />
            </div>
            <div style="position:absolute;bottom:0;background-color: #fd9a9a;width: 15%;user-select:none;text-align: center;color: #FFFFFF;font-weight: bold" class="item_inner_content">MORE</div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%;">
        <div class="item" @click="itemClick">
          <div class="item_inner item_inner_right" >
            <div class="item_inner_right_content" @click="changeCurrentArticle(index)" v-for="(item,index) in article" :key="index">
              <el-row style="height: 30%">
                <el-col :span="21" style="height: 100% ;font-weight: bold;">
                  {{ item.dynamicTitle }}
                </el-col>
                <el-col :span="3" style="height: 100%">{{ dateFormat(item.dynamicDate) }}</el-col>
              </el-row>
              <el-row style="height: 80%;margin:0 3px" aligh="center">
                <el-col :span="22" style="height: 100%;border-right: 1px solid gainsboro;" >
                  <div  class="item_inner_content2" style="width: 300px;height: 45px">
                    <span style="text-overflow:ellipsis;display: block;height: 20px;width: 300px;margin-top: 5px;font-size: 15px;color: dimgray">
                      {{ item.dynamicContent }}</span>
                  </div>
                </el-col>
                <el-col :span="2" style="height: 100%;text-align: center;">
                  <el-icon size="3em"><ArrowRight /></el-icon>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "VenueDynamics",
  data() {
    return {
      article: [],
      currentNum: 0,
      dateRight:null,
      titleRight:null,
      contentRight:null,

    };
  },
  methods: {
    itemClick(){
      this.$router.push({
        path: 'VenueDynamicsDetails',
        query: {
          key1: this.article[this.currentNum].dynamicDate,
          key2: this.article[this.currentNum].dynamicTitle,
          key3:  this.article[this.currentNum].dynamicContent
        }
      });
    },
    dateFormat(time) {
      const date = new Date(time);
      const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return month + "-" + day + " ";
    },
    changeCurrentArticle(index) {
      this.currentNum = index;
    },
    fetchArticleList() {
      axios
          .get('http://39.101.75.128:8080/system/dynamic/getDynamic')
          .then((response) => {
            console.log(response.data.data);
            this.article = response.data.data;
            this.dateRight = this.article[this.currentNum].dynamicDate
            this.titleRight = this.article[this.currentNum].dynamicTitle
            this.contentRight = this.article[this.currentNum].dynamicContent
          })
          .catch((error) => {
            console.error(error);
          });
    },
  },
  mounted() {
    this.fetchArticleList();
  },
};
</script>

<style scoped>
.item {
  height: 60vh;
  border: darkgray solid 1px;
  background-color: aliceblue;
}


.item_inner {
  padding: 10px 10px 10px 20px;
  height: 90%;
  width: 90%;
  position: relative;
}
.item_inner2:hover{
  background-color: #f9ecaa;
}

.item_inner_content {
  margin: 5px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-items: center;
  overflow: hidden;
}
.item_inner_content2 {
  margin: 5px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-items: center;
  overflow: hidden;
}

.item_inner_right_content {
  height: 30%;
  border-bottom: darkgray solid 1px;
  margin: 10px 0;
}
.item_inner_right_content:hover{
  background-color: #f9ecaa;
}
.item_inner_right {
  overflow: scroll;
}
</style>
<!--&lt;!&ndash;场馆动态&ndash;&gt;-->
<!--<template>-->
<!--  <div style="height: 100%;">-->
<!--    <el-row justify="center" style="height: 100%;"  :gutter="20">-->
<!--      <el-col :span="12" style="height: 100%;" >-->
<!--        <div class="item">-->
<!--          <div class="item_inner">-->
<!--            <div style="height: 5%;line-height: 160%;" class="item_inner_content">{{ dateFormat(article[currentNum].dynamicDate) }}</div>-->
<!--            <div style="font-size: 1.3em;height:8%;line-height:190%;font-weight: bold;" class="item_inner_content">{{ article[currentNum].dynamicTitle }}</div>-->
<!--            <div style="height: 17%;text-indent: 2em;" class="item_inner_content">{{ article[currentNum].dynamicContent }}</div>-->
<!--            <div style="height: 50%;" class="item_inner_content">-->
<!--              <el-image style="width: 100%;height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />-->
<!--            </div>-->
<!--            <div style="position:absolute;bottom:0;background-color: #fd9a9a;width: 15%;user-select:none;text-align: center;color: #FFFFFF;font-weight: bold" class="item_inner_content">MORE</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="12" style="height: 100%;">-->
<!--        <div class="item">-->
<!--          <div class="item_inner item_inner_right" >-->
<!--            <div class="item_inner_right_content" @click="changeCurrentArticle(index)" v-for="(item,index) in article" :key="item">-->
<!--              <el-row style="height: 30%">-->
<!--                <el-col :span="21" style="height: 100%">-->
<!--                  {{item.dynamicTitle}}-->
<!--                </el-col>-->
<!--                <el-col :span="3" style="height: 100%">{{ dateFormat(item.dynamicDate)}}</el-col>-->
<!--              </el-row>-->
<!--              <el-row style="height: 60%;margin:0 3px" aligh="center">-->
<!--                <el-col :span="22" style="height: 100%;border-right: 1px solid gainsboro" >-->
<!--                  {{"文本"}}-->
<!--                </el-col>-->
<!--                <el-col :span="2" style="height: 100%;text-align: center;">-->
<!--                  <el-icon size="3em"><ArrowRight /></el-icon>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--  </div>-->
<!--</template>-->

<!--<script>-->



<!--import axios from "axios";-->

<!--export default {-->
<!--  setup(){-->
<!--    //日期过滤器-->
<!--    function dateFormat(time) {-->
<!--      var date=new Date(time);-->
<!--      //var year=date.getFullYear();-->
<!--      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;-->
<!--      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();-->
<!--      //var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();-->
<!--      //var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();-->
<!--      //var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();-->
<!--      // 拼接-->
<!--      return month+"-"+day+" ";-->
<!--    }-->
<!--    return {-->
<!--      dateFormat-->
<!--    }-->
<!--  },-->
<!--  name: "VenueDynamics",-->
<!--  data(){-->
<!--    return {-->
<!--      article:[],-->
<!--      currentNum:0-->
<!--    }-->
<!--  },-->
<!--  methods:{-->
<!--    changeCurrentArticle(index){-->
<!--      this.currentNum=index;-->
<!--    },-->
<!--    fetchArticleList() {-->
<!--      axios.get('http://localhost:8080/dynamic/getDynamic')-->
<!--          .then(response => {-->
<!--            console.log(response.data.data)-->
<!--            this.article = response.data.data;-->
<!--          })-->
<!--          .catch(error => {-->
<!--            console.error(error);-->
<!--          });-->
<!--    },-->
<!--  },-->
<!--  mounted() {-->
<!--    this.fetchArticleList();-->
<!--  },-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.item{-->
<!--  height: 60vh;-->
<!--  border: darkgray solid 1px;-->
<!--  background-color: aliceblue;-->
<!--}-->
<!--.item_inner{-->
<!--  padding: 10px 10px 10px 20px;-->
<!--  height: 90%;-->
<!--  width: 90%;-->
<!--  position: relative;-->

<!--}-->
<!--.item_inner_content{-->
<!--  margin: 5px 0;-->
<!--  display: -webkit-box;-->
<!--  -webkit-box-orient: vertical;-->
<!--  -webkit-line-clamp:4;-->
<!--  align-items: center;-->
<!--  overflow:hidden;/*溢出时隐藏 */-->
<!--}-->
<!--.item_inner_right_content{-->
<!--  height: 30%;-->
<!--  border-bottom: darkgray solid 1px;-->
<!--  margin: 10px 0;-->
<!--}-->
<!--.item_inner_right{-->
<!--  overflow: scroll;-->
<!--}-->

<!--</style>-->
